import React, { Component } from 'react'
import { Form, Input, Button } from 'components/form'
import Styles from './index.less'
const FormItem = Form.Item
@Form.create()
class Register extends Component {
  constructor() {
    super()
    this.confirmBtn = this.confirmBtn.bind(this)
    this.compareToFirstPassword = this.compareToFirstPassword.bind(this)
    this.validateToNextPassword = this.validateToNextPassword.bind(this)
  }
  confirmBtn() {
    this.props.form.validateFields((err, value) => {console.log(err, value)})
  }
  compareToFirstPassword(rule, value, callback) {
    const { getFieldsValue } = this.props.form
    if (value && value !== getFieldsValue('password')) {
      console.log(getFieldsValue('password'))
      callback('两次密码输入不相同')
    } else {
      callback()
    }
  }
  validateToNextPassword(rule, value, callback) {
    const { validateFields } = this.props.form
    console.log(validateFields)
    // validateFields((err, value) => {
    //   console.log(err, value)
    // })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div className={Styles.register}>
        <div className={Styles.registerContainer}>
          <div className={Styles.registerForm}>
            <h2 className={Styles.title}>用户注册</h2>
            <Form className={Styles.formContainer}>
              <FormItem>
                {getFieldDecorator('user', {
                    rules: [{
                      required: true, message: '用户名不能为空'
                    }, {
                      type: 'email', message: '邮箱不合法'
                    }]
                  })(
                    <Input placeholder="用户名(邮箱)"/>
                  )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('password', {
                  rules: [{
                    required: true, message: '密码不能为空'
                  }, {
                    validator: this.validateToNextPassword 
                  }]
                })
                (
                  <Input placeholder="密码"/>
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('confirmPsw', {
                  rules: [{
                    required: true, message: '确认密码不能为空'
                  }, {
                    validator: this.compareToFirstPassword
                  }]
                })
                (
                  <Input placeholder="确认密码"/>
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('name', {
                  rules: [{
                    required: true, message: '姓名不能为空'
                  }]
                })(
                  <Input placeholder="姓名"/>
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('tel', {
                  rules: [{
                    required: true, message: '电话不能为空'
                  }, {
                    type: 'tel', message: '联系方式格式不正确'
                  }]
                })(
                  <Input placeholder="电话"/>
                )}
              </FormItem>
              <FormItem>
                <Button onClick={this.confirmBtn}>注册</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    )
  }
}
export default Register